import { PageContainer, ProTable } from '@ant-design/pro-components';
import { useState, useEffect,useRef } from "react"
import { getInterviewTitleApi,deleteInterviewApi } from "@/services/interview"
import Tagcontainer from "../components/tagContainer"
import { formatTime } from "@/utils/formatTime";
import {Button,Popconfirm,Select,message} from "antd"
import {history,useLocation} from 'umi'
import { useDispatch, useSelector } from '@umijs/max';
import InterviewDetail from "./components/interviewDetail"
export default function InterviewList() {
  const actionRef = useRef()
  const dispatch = useDispatch()
  const location = useLocation()
  console.log(location,"这里")
  const mode = (location.pathname==='/interview/interviewList')?'list':'detail'
  console.log(mode,"当前模式")
  const [current, setCurrent] = useState(1);
  const [pageSize, setPageSize] = useState(5)
  const [targetId,setTargetId] = useState('');
  const {typeList} = useSelector(state=>state.type)
  useEffect(()=>{
    if(typeList.length===0){
      dispatch({
        type:'type/_initList'
      })
    }else{
      console.log('面试题列表页有数据不用请求')
    }
  },[])
  const selectOptions = typeList.map(item=>{
    return {
      label:item.typeName,
      value:item._id
    }
  })
  function handlePageChange(newPage) {
    // 设置切换页数
    setCurrent(newPage)

  }
  useEffect(()=>{
    // 如果当前'path为/interview/interviewList 重置id
    if(mode==='list'){
      setTargetId('')
    }
  },[mode])
  function todetail(row) { 
    // 设置当前的题目id
    setTargetId(row._id)
    history.push('/interview/interviewList/interviewDetail')
    // navigator()
  }
  function editInterview(row) {
    const id = row._id;
    history.push('/interview/editInterview',{id})
   }
  function confirm(row){
    const id = row._id;
    deleteInterviewApi(id).then(res=>{
      // 重新请求列表
      actionRef.current.reload();
      message.success('删除成功')
    })
  }
  
  const columns = [
    {
      title: '序号',
      key: "number",
      align:'center',
      search:false,
      
      render: (_, rows, index) => {
        const value = (current - 1) * pageSize + index + 1
        return <span>{value}</span>
      }
    },
    {
      title: "题目名称",
      align: 'center',
      dataIndex: 'interviewTitle',
      key: 'interviewTitle',

    }, {
      title: "题目分类",
      align: "center",
      dataIndex: 'typeId',
      key: 'typeId',
      renderFormItem:(item, options, form)=>{
        return (
          <Select options={selectOptions}></Select>
        )
      },
      render: (txt, rows) => {
        return (
          <Tagcontainer typeId={txt} />
        )
      }
    }, {
      search:false,
      title: "更新时间",
      align: 'center',
      dataIndex: "onShelfDate",
      key: "onShelfDate",
      render: (txt) => {
        return (<span>{formatTime(txt, true)}</span>)
      }

    },
    {
      title: '操作',
      align: 'center',
      key: 'options',
      search:false,

      render: (_, rows) => {
        return (
          <>
            <Button type="link" size="small" onClick={() => { todetail(rows) }}>
              详情
          </Button>
            <Button type="link" size="small" onClick={() => { editInterview(rows) }}>
              编辑
            </Button>
            <Popconfirm
              title="删除面试题"
              description="确定删除当前面试题"
              okText="确定"
              cancelText="取消"
              onConfirm={() => {
                confirm(rows);
              }}
            >
              <Button type="link" size="small" >
                删除
              </Button>
            </Popconfirm>
          </>
        )
      }
    }
  ]
  
  return (
    <PageContainer
     
    >
      {
        (mode==='detail' && targetId!=='' )?(<InterviewDetail id={targetId} />):(<ProTable
          pagination={{
            defaultPageSize: 5,
            onChange: handlePageChange
          }}
          request={async (params) => {
            params.pageSize = 5;
            params.current = current;
            const resp = await getInterviewTitleApi(params)
            console.log(resp)
            return {
              data: resp.data.data,
              success: true,
              total: resp.data.count
            }
          }}
          columns={columns}
          rowKey={(rows) => { return rows._id }}
          actionRef={actionRef}
        ></ProTable>)
      }
      
    </PageContainer>
  )
}
